<template>
	<view class="device-detail">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="pollution-wrap">
				<view class="title">
					<view class="line">
					</view>
					<text>污染治理设施信息</text>

				</view>
				<view class="content">
					<view class="c">
						<view class="name">二维码编号：</view>
						<view class="val">{{deviceDetail.devicecode}}</view>
					</view>
					<view class="c">
						<view class="name">设施名称：</view>
						<view class="val">{{deviceDetail.devicename}}</view>
					</view>
					<view class="c">
						<view class="name">设施类型：</view>
						<view class="val">{{ adviceTypeList.find((item)=>item.value ==deviceDetail.devicetype)?.text}}
						</view>
					</view>
					<view class="c">
						<view class="name">处理设计风量(m³/h)：</view>
						<view class="val">{{deviceDetail.designairvolume}}</view>
					</view>
					<view class="c">
						<view class="name">设计使用量(kg)：</view>
						<view class="val">{{deviceDetail.designusenum}}</view>
					</view>
					<view class="c">
						<view class="name">更换周期：</view>
						<view class="val">{{deviceDetail.recircledays}}天</view>
					</view>
					<!-- <view class="c">
						<view class="name">环保管理员1：</view>
						<view class="val">{{deviceDetail.hbperson}}</view>
					</view>
					<view class="c">
						<view class="name">手机号：</view>
						<view class="val">{{deviceDetail.hbmobile}}</view>
					</view>
					<view class="c">
						<view class="name">环保管理员2：</view>
						<view class="val">{{deviceDetail.hbpersonsecond}}</view>
					</view>
					<view class="c">
						<view class="name">手机号：</view>
						<view class="val">{{deviceDetail.hbmobilesecond}}</view>
					</view> -->
					<view class="btn">
						<button @click="saveImage">保存二维码到本地</button>
					</view>
					<view class="qrcode">
						<image @click="searchImage(deviceDetail.qrcodeurl)" :src="deviceDetail.qrcodeurl" mode="">
						</image>
						<view class="code">编号：{{deviceDetail.devicecode}}</view>
					</view>
					<!-- 	<view class="text">
						郑州市生态环境局制
					</view> -->
				</view>
			</view>
			<view class="change-record">
				<view class="title-wrap">
					<view class="left">
						<view class="line"></view>
						<text>涉废更换记录</text>
					</view>
					<!-- 	<button @click="addDevice">新增</button> -->
				</view>
				<view class="content">
					<view class="c">
						<view class="name">涉废类型：</view>
						<view class="val">
							{{wasteCodeList.find((item)=>item.value==stockDetail?.wastetype)?.text || stockDetail?.wastetype  }}
						</view>
					</view>
					<view class="c">
						<view class="name">涉废代码：</view>
						<view class="val">{{stockDetail?.wastecode}}</view>
					</view>
					<view class="c">
						<view class="name">本次更换量:</view>
						<view class="val">{{stockDetail?.putoutnum}}{{stockDetail?.wasteunitname}}</view>
					</view>
					<view class="c">
						<view class="name">本次填充量：</view>
						<view class="val">{{stockDetail?.putinnum}}</view>
					</view>
					<view class="c">
						<view class="name">碘值：</view>
						<view class="val">{{stockDetail?.dianval}}</view>
					</view>
					<view class="c">
						<view class="name">更换周期：</view>
						<view class="val">{{stockDetail?.circledays}}天</view>
					</view>
					<view class="c">
						<view class="name">更换时间：</view>
						<view class="val">{{stockDetail?.nextchangedate?.split(' ')[0]}}</view>
					</view>
					<view class="c">
						<view class="name">更换前照片：</view>
						<view class="val"> <text class="text"
								@click="searchImage(stockDetail?.changebeforeimgurl)">点击查看</text> </view>
					</view>
					<view class="c">
						<view class="name">更换中照片：</view>
						<view class="val"> <text class="text"
								@click="searchImage(stockDetail?.changemidimgurl)">点击查看</text> </view>
					</view>
					<view class="c">
						<view class="name">更换后图片：</view>
						<view class="val"> <text class="text"
								@click="searchImage(stockDetail?.changeafterimgurl)">点击查看</text> </view>
					</view>
					<view class="c">
						<view class="name">相关发票照片：</view>
						<view class="val"> <text class="text"
								@click="searchImage(stockDetail?.imgticketurl)">点击查看</text>
						</view>
					</view>
					<view class="c">
						<view class="name">入库暂存照片：</view>
						<view class="val"> <text class="text"
								@click="searchImage(stockDetail?.imgstockkeepurl)">点击查看</text> </view>
					</view>
					<view class="c">
						<view class="name">缴费单图片：</view>
						<view class="val"> <text class="text"
								@click="searchImage(stockDetail?.imgpowerfeeurl)">点击查看</text> </view>
					</view>
				</view>
			</view>
			<view class="btn-wrap">
				<button @click="changeStatus">{{deviceDetail?.status==1?'停用设施':'启用设施'}}</button>

			</view>
		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let agent = ref(1)
	let deviceid = ref('')
	let wasteCodeList = ref([])
	let stockDetail = ref({})
	let adviceTypeList = ref([])
	let deviceDetail = ref({})
	let district = ref('')
	let addDevice = () => {
		uni.navigateTo({
			url: "/homePageOther/trashChange/trashChange"
		})
	}
	let name = "设施详情"
	onLoad((e) => {
		agent.value = e.agent
		deviceid.value = e.id

		http({
			url: '/stock/detail',
			data: {
				id: deviceid.value,

			}
		}).then((res) => {
			if (res.code == 0) {
				stockDetail.value = res.data
			}
		})
		http({
			url: '/device/detail',
			data: {
				id: deviceid.value
			}

		}).then((res) => {
			if (res.code == 0) {
				deviceDetail.value = res.data
			}
		})

	})
	let saveImage = () => {

		uni.showLoading({
			title: '加载中'
		});
		uni.downloadFile({
			url: deviceDetail.value.qrcodeurl,
			success: (res) => {
				uni.hideLoading();
				if (res.statusCode === 200) {
					console.log(res, 'res');
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function(res) {

							uni.showToast({
								title: "保存成功",
								icon: "none"
							});
						},
						fail: function() {
							uni.showToast({
								title: "保存失败，请稍后重试",
								icon: "none"
							});
						}
					});
				}
			},
			fail: (err) => {
				uni.showToast({
					title: "失败啦",
					icon: "none"
				});
			}
		})


	}
	let changeStatus = () => {
		let status = deviceDetail.value.status == 1 ? 2 : 1
		http({
			url: '/device/applyStopUse',
			data: {
				id: deviceDetail.value.id,
				status
			}
		}).then((res) => {
			if (res.code == 0) {
				uni.showToast({
					title: "操作成功",
					icon: 'none'
				})

				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		})
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	let searchImage = (url) => {
		if (!url) {
			uni.showToast({
				title: "暂无图片",
				icon: "none"
			})
			return
		}
		let imgUrl = url.split(',')
		uni.previewImage({
			urls: imgUrl,
			current: 0
		})
	}
	onShow(() => {

	})
	let jumpDetail = () => {
		uni.navigateTo({
			url: "/contorllerPageOther/disposeenterprisedetail/disposeenterprisedetail"
		})
	}
	http({
		url: '/wasteCode/getListItems'
	}).then((res) => {
		if (res.code == 0) {
			wasteCodeList.value = res.data.map((item) => {
				return {
					text: item.wastetypename,
					value: item.wastecode
				}
			})
			console.log(wasteCodeList.value, 'wasteCodeList');
		}
	})
</script>

<style lang="scss" scoped>
	.device-detail {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			height: calc(100vh - 160rpx);
			width: 100vw;
			background-color: #F0F2F5;
			overflow: auto;

			.btn-wrap {
				margin-top: 40rpx;
				padding: 0 40rpx;
				margin-bottom: 40rpx;

				button {
					width: 100%;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;

					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}

			.change-record {
				margin-top: 17rpx;

				.content {
					background-color: #fff;
					margin-top: 5rpx;
					padding-top: 30rpx;
					padding-bottom: 65rpx;

					.c:first-child {
						margin-top: 0 !important;
					}

					.c {
						padding: 0 48rpx 0 48rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50rpx;

						.name {

							font-weight: 400;
							font-size: 31rpx;
							color: #333333;

						}

						.val {

							font-weight: 400;
							font-size: 33rpx;
							color: #333333;

							.text {
								color: #0874FA;
							}
						}
					}
				}

				.title-wrap {
					width: 750rpx;
					height: 108rpx;
					background: #FFFFFF;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 40rpx 0 50rpx;

					.left {
						display: flex;
						align-items: center;

						.line {
							width: 8rpx;
							height: 25rpx;
							background: #0874FA;
							border-radius: 4rpx;
							margin-right: 15rpx;
						}

						text {

							font-weight: 500;
							font-size: 35rpx;
							color: #333333;

						}
					}

					button {
						width: 112rpx;
						height: 74rpx;
						background: #0874FA;
						border-radius: 14rpx;

						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;

					}
				}

			}

			.pollution-wrap {
				.content {
					background-color: #fff;
					margin-top: 6rpx;
					padding: 30rpx 50rpx 52rpx 50rpx;

					.text {

						font-weight: 500;
						font-size: 21rpx;
						color: #333333;
						text-align: center;
						margin-top: 18rpx;
					}

					.qrcode {

						width: 291rpx;
						height: 329rpx;
						border: 1px solid #313131;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin: 0 auto;

						image {
							width: 200rpx;
							height: 200rpx;
						}

						.code {
							margin-top: 10rpx;
							font-weight: 500;
							font-size: 21rpx;
							color: #333333;

						}
					}

					.btn {
						margin-top: 70rpx;
						margin-bottom: 30rpx;

						button {

							font-weight: 400;
							font-size: 23rpx;
							color: #FFFFFF;
							width: 274rpx;
							height: 43rpx;
							background: #047AE1;
							border-radius: 7rpx;
							line-height: 43rpx;
							margin: 0 auto;
						}
					}

					.c:first-child {
						margin-top: 0rpx !important;
					}

					.c {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 50rpx;

						.name {

							font-weight: 400;
							font-size: 31rpx;
							color: #333333;

						}

						.val {

							font-weight: 400;
							font-size: 33rpx;
							color: #333333;

						}
					}
				}

				.title {
					width: 750rpx;
					height: 108rpx;
					background: #FFFFFF;
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 35rpx;
					color: #333333;
					padding-left: 50rpx;

					.line {
						width: 8rpx;
						height: 25rpx;
						background: #0874FA;
						border-radius: 4rpx;
						margin-right: 15rpx;
					}
				}
			}
		}

	}
</style>